<template>
	<view>
		<u-navbar :title="$t('addBox.navText')" placeholder :autoBack="true" />
		<view class="content">
			<view class="title">
				<view class="xing">*</view>
				<view>{{ $t('addBox.input_4') }}</view>
			</view>
			<picker
				mode="selector"
				:range="list"
				@change="event => (roomType = list[event.detail.value])"
			>
				<view class="input">
					<u--input
						disabledColor="#fff"
						disabled
						:placeholder="$t('addBox.searchInput_4')"
						:adjustPosition="false"
						border="none"
						v-model="roomType"
					></u--input>
				</view>
			</picker>
			<view v-if="roomType == '大厅'">
				<view class="title">
					<view class="xing">*</view>
					<view>{{ $t('addBox.input_5') }}</view>
				</view>
				<view class="input">
					<u--input
						:placeholder="$t('addBox.searchInput_5')"
						:adjustPosition="false"
						border="none"
						v-model="form.table_num"
					></u--input>
				</view>
			</view>

			<view v-if="roomType == '包厢'">
				<view class="title">
					<view class="xing">*</view>
					<view>{{ $t('addBox.input_1') }}</view>
				</view>
				<view class="input">
					<u--input
						:placeholder="$t('addBox.searchInput_1')"
						:adjustPosition="false"
						border="none"
						v-model="form.box_name"
					></u--input>
				</view>
				<view class="title">
					<view>{{ $t('addBox.input_7') }}</view>
				</view>
				<view class="input">
					<u--input
						:placeholder="$t('addBox.searchInput_7')"
						:adjustPosition="false"
						border="none"
						v-model="form.box_name_copy"
					></u--input>
				</view>
				<view class="title between">
					<view>接受用户自行装饰</view>
					<view class="radio">
						<u-radio-group v-model="form.is_custom">
							<u-radio
								shape="circle"
								label="是"
								activeColor="#FFC100"
								name="1"
								:customStyle="{ marginLeft: '10px' }"
							></u-radio>
							<u-radio
								shape="circle"
								label="否"
								activeColor="#FFC100"
								name="0"
								:customStyle="{ marginLeft: '10px' }"
							></u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="title"><view>包厢风格</view></view>
				<view class="input">
					<u--input
						placeholder="请输入包厢风格"
						:adjustPosition="false"
						border="none"
						v-model="form.box_style"
					></u--input>
				</view>
				<view class="title"><view>包厢风格(维语)</view></view>
				<view class="input">
					<u--input
						placeholder="请输入包厢风格(维语)"
						:adjustPosition="false"
						border="none"
						v-model="form.box_style_copy"
					></u--input>
				</view>
				<view class="title"><view>配套设施</view></view>
				<view class="grid_4">
					<view
						class="grid_item"
						:class="[item.show ? 'active' : '']"
						@click="getRoom(item)"
						v-for="(item, index) in roomList"
						:key="index"
					>
						{{ language == 'zh' ? item.name : item.name_copy }}
					</view>
				</view>
				<view class="title"><view>包厢介绍</view></view>
				<view class="input">
					<u--textarea
						placeholder="请输入包厢介绍"
						:adjustPosition="false"
						border="none"
						v-model="form.content"
					></u--textarea>
				</view>
				<view class="title"><view>包厢介绍(维语)</view></view>
				<view class="input">
					<u--textarea
						placeholder="请输入包厢介绍(维语)"
						:adjustPosition="false"
						border="none"
						v-model="form.content_copy"
					></u--textarea>
				</view>
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{ $t('addBox.input_2') }}</view>
			</view>
			<view class="input">
				<u--input
					type="number"
					:placeholder="$t('addBox.searchInput_2')"
					:adjustPosition="false"
					border="none"
					v-model="form.box_num"
				></u--input>
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{ $t('addBox.input_6') }}</view>
			</view>
			<view class="input">
				<u--input
					type="number"
					:placeholder="$t('addBox.searchInput_6')"
					:adjustPosition="false"
					border="none"
					v-model="form.box_max"
				></u--input>
			</view>
			<view class="title" v-if="roomType == '包厢'">
				<!-- <view class="xing">*</view> -->
				<view>{{ $t('addBox.input_3') }}</view>
			</view>
			<u-upload
				v-if="roomType == '包厢'"
				:fileList="fileList1"
				width="160"
				height="98"
				@afterRead="afterRead"
				@delete="deletePic"
				name="1"
				multiple
				:maxCount="6"
			>
				<image
					src="/static/image/merchant_3.png"
					mode="widthFix"
					style="width: 160px;height: 98px;"
				></image>
			</u-upload>
			<u-button
				:text="$t('addBox.submitBtn')"
				v-if="type == 'add'"
				shape="circle"
				:customStyle="btnStyle"
				@click="submit"
			></u-button>
			<u-button
				:text="$t('addBox.submitBtn')"
				v-if="type == 'edit'"
				shape="circle"
				:customStyle="btnStyle"
				@click="editConfirm"
			></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import graceChecker from '@/mixins/formVerify.js';
export default {
	data() {
		return {
			imgUrl: this.$DOMAIN_URL,
			roomType: '包厢',
			list: ['大厅', '包厢'],
			btnStyle: {
				background: '#FFC100',
				border: 'none',
				height: '80rpx',
				color: '#fff',
				width: '90%',
				margin: '40px auto'
			},
			form: {
				type: '1',
				table_num: '', //桌号
				box_name: '', //包厢名称(汉语)
				box_name_copy: '', //包厢名称(维语)
				box_num: '', //最少容纳人数
				box_max: '', //最大容纳人数
				images: [], //图片
				box_ids: [], //配套设施
				box_style: '', //包厢风格
				box_style_copy: '', //包厢风格(维语)
				content: '', //包厢介绍
				content_copy: '', //包厢介绍(维语)
				is_custom: '0' //接受用户自行装饰
			},
			rule: {
				table_num: {
					type: String,
					required: false,
					message: '请输入桌号'
				},
				box_name: {
					type: String,
					required: false,
					message: '请输入包厢名称'
				},
				box_name_copy: {
					type: String,
					required: false,
					message: '请输入包厢名称(维语)'
				},
				is_custom: {
					type: Boolean,
					required: false,
					message: '请选择是否接受用户自行装饰'
				},
				box_style: {
					type: String,
					required: false,
					message: '请输入包厢风格'
				},
				box_style_copy: {
					type: String,
					required: false,
					message: '请输入包厢风格(维语)'
				},
				box_ids: {
					type: String,
					required: false,
					message: '请选择配套设置'
				},
				content: {
					type: String,
					required: false,
					message: '请输入包厢介绍'
				},
				content_copy: {
					type: String,
					required: false,
					message: '请输入包厢介绍(维语)'
				},
				box_num: {
					type: String,
					required: true,
					message: '请输入标准人数'
				},
				box_max: {
					type: String,
					required: true,
					message: '请输入最大容纳人数'
				},
				images: {
					type: Array,
					required: false,
					message: '请上传图片'
				}
			},
			type: '',
			id: 0,
			fileList1: [],
			roomList: []
		};
	},
	onLoad(event) {
		this.type = event.type;
		this.allocation();
		event.id ? (this.id = event.id) : (this.id = 0);
		event.type == 'edit' ? this.init() : '';
	},
	computed: {
		language() {
			return this._i18n.locale;
		}
	},
	methods: {
		getRoom(item) {
			item.show = !item.show;
			if (item.show) {
				this.form.box_ids.push(item.id);
			} else {
				let index = this.form.box_ids.findIndex(e => e == item.id);
				this.form.box_ids.splice(index, 1);
			}
		},
		allocation() {
			this.$http.get('wanlshop/shop/addRoom').then(res => {
				if (res.code == 1) {
					this.roomList = res.data.roomList.map(item => ({
						...item,
						show: false
					}));
				}
			});
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
			this.form.images.splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.$IMG_URL + 'common/upload',
					filePath: url,
					name: 'file',
					header: {
						token: uni.getStorageSync('token')
					},
					success: res => {
						let info = JSON.parse(res.data);
						if (info.code == 1) {
							this.form.images.push(info.data.url);
							resolve(info.data.fullurl);
						}
					}
				});
			});
		},
		editConfirm() {
			let transit = graceChecker.RuleValidation(this.form, this.rule);
			if (transit) {
				if (this.roomType == '大厅' && this.form.table_num == '') return uni.$u.toast('请输入桌号');
				if (this.roomType == '包厢' && this.form.box_name == '')
					return uni.$u.toast('请输入包厢名称');
				uni.showLoading({
					title: '修改中...',
					mask: true
				});
				this.roomType == '包厢' ? (this.form.type = 0) : (this.form.type = 1);
				this.form.id = this.id;
				this.$http.post('wanlshop/shop/editRoom', this.form).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						setTimeout(() => {
							this.$refs.uToast.show({
								type: 'default',
								message: '修改成功',
								duration: 1000,
								complete() {
									uni.$emit('updateList');
									uni.navigateBack();
								}
							});
						}, 150);
					}
				});
			}
		},
		init() {
			this.$http
				.get('wanlshop/shop/editRoom', {
					id: this.id
				})
				.then(res => {
					if (res.code == 1) {
						this.form.type = res.data.type;
						this.form.type == '1' ? (this.roomType = '大厅') : (this.roomType = '包厢');
						this.form.table_num = res.data.table_num;
						this.form.box_name = res.data.box_name;
						this.form.box_name_copy = res.data.box_name_copy;
						this.form.box_num = res.data.box_num;
						this.form.box_max = res.data.box_max;
						this.form.images = res.data.images.split(',');
						this.form.images.forEach(item => this.fileList1.push({ url: this.$DOMAIN_URL + item }));
						this.form.is_custom = res.data.is_custom;
						this.form.box_style = res.data.box_style;
						this.form.box_style_copy = res.data.box_style_copy;
						this.form.content = res.data.content;
						this.form.content_copy = res.data.content_copy;
						this.form.box_ids = res.data.box_ids.split(',');
						this.roomList.forEach(item => {
							this.form.box_ids.forEach(evetnt => {
								if (item.id == evetnt) item.show = true;
							});
						});
					}
				});
		},
		submit() {
			if (this.roomType == '大厅' && this.form.table_num == '') return uni.$u.toast('请输入桌号');
			if (this.roomType == '包厢' && this.form.box_name == '')
				return uni.$u.toast('请输入包厢名称');
			let transit = graceChecker.RuleValidation(this.form, this.rule);
			if (transit) {
				uni.showLoading({
					title: '添加中...',
					mask: true
				});
				this.roomType == '包厢' ? (this.form.type = 0) : (this.form.type = 1);
				this.form.box_ids = this.form.box_ids.toString();
				this.$http.post('wanlshop/shop/addRoom', this.form).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						setTimeout(() => {
							this.$refs.uToast.show({
								type: 'default',
								message: '添加成功',
								duration: 1000,
								complete() {
									uni.navigateBack();
								}
							});
						}, 150);
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/deep/.u-textarea {
	padding: 0rpx !important;
}
.grid_4 {
	display: grid;
	grid-column-gap: 20rpx;
	grid-template-columns: repeat(4, 1fr);
	grid-row-gap: 20rpx;
	margin-bottom: 40rpx;

	.grid_item {
		background: rgba(248, 248, 248, 1);
		border: 2rpx solid rgba(248, 248, 248, 1);
		border-radius: 10rpx;
		color: rgba(97, 97, 97, 1);
		font-size: 28rpx;
		padding: 12rpx 22rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.active {
		border: 2rpx solid rgba(255, 193, 2, 1) !important;
		color: rgba(255, 193, 2, 1) !important;
		background: rgba(255, 252, 242, 1) !important;
	}
}
.content {
	padding: 24rpx;

	.content_title {
		display: flex;
		align-items: center;
		color: #0a1629;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 40rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}

	.title {
		display: flex;
		color: rgba(33, 33, 33, 1);
		font-size: 30rpx;
		margin-bottom: 28rpx;

		.xing {
			color: rgba(255, 48, 48, 1);
			font-size: 32rpx;
			margin-right: 10rpx;
		}
	}

	.input {
		border: 1px solid rgba(227, 229, 232, 1);
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 40rpx;
	}

	.image {
		width: 320rpx;
		height: 196rpx;
		margin-bottom: 40rpx;
	}
}
</style>
